<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件传值</title>
    <style>

    </style>
</head>

<body>
    <div id="app">
        <blog-post title="论电动力学" content="这个一个很难很难的问题"></blog-post>
        <blog-post title="自然哲学的数学原理" content="very good"></blog-post>
        <blog-post :title="posts[0].title" :content="posts[0].content"></blog-post>
        <hr>
        <blog-post 
            v-for="item in posts" 
            :key="item.title"
            :title="item.title" 
            :content="item.content"
        />
    </div>
    <script src="./js/vue.js"></script>
    <script>
        //组件的定义
        Vue.component('blog-post', {
            //数据必须是一个函数，而且要返回一个数据对象
            data() {
                return {
                   
                }
            },
            props:['title','content'],
            methods: {
            },
            //组件模板
            template: `
            <div class="post">
                <h2>{{title}}</h2>
                <p>{{content}}</p>
            </div>`
        })
        const app = new Vue({
            el: '#app',
            data: {
                posts:[
                    {
                        title:'信息论',
                        content:'香浓公式介绍'
                    },
                    {
                        title:'论电动力学',
                        content:'这个一个很难很难的问题'
                    },
                    {
                        title:'自然哲学的数学原理',
                        content:'very good'
                    },
                ]
            },

        })
    </script>
    <script>
        function foo(){
            return {
                x:1
            }
        }
        let obj = { x:1}
        let a = foo()
        let b = foo()
        let c = obj
        let d = obj
    </script>

</body>

</html>